<template>
  <!-- 移动端底部菜单 -->
  <div class="nav">
    <router-link :to="{ name: item.router }" class="menu" v-for="item in menu" :key="item" >
      <img class="ic" :src=" current == item.router ? item.active : item.ic " />
      <span :class="current == item.router ? 'active' : 'name'">{{ item.name }}</span>
    </router-link>
  </div>

</template>

<script>

export default {
  components: {},
  data() {
    return {
      current:"home",
      menu: [
        {
          name: "首页",
          router: "home",
          ic: `${require("@/assets/image/publice/home.png")}`,
          active: `${require("@/assets/image/publice/home-s.png")}`
        },
        {
          name: "产品",
          router: "product",
          ic: `${require("@/assets/image/publice/product.png")}`,
          active: `${require("@/assets/image/publice/product-s.png")}`
        },
        {
          name: "投资者",
          router: "investors",
          ic: `${require("@/assets/image/publice/investors.png")}`,
          active: `${require("@/assets/image/publice/investors-s.png")}`
        },
        {
          name: "联系我们",
          router: "contact",
          ic: `${require("@/assets/image/publice/contact.png")}`,
          active: `${require("@/assets/image/publice/contact-s.png")}`
        },
      ]
    };
  },
   watch: {
    $route: {
      deep: true,
      immediate: true,
      handler() {
        this.setActive();
      },
    },
  },


  mounted() { },
  methods: {

    /**
     *根据跳转的路由显示对应的菜单
     */
    setActive() {
      //菜单子路由
      //
      this.$router.options.routes?.[0].children.forEach((item) => {
        if (item.name == this.$router.currentRoute.value.name) {
          this.current = this.$router.currentRoute.value.name;
        } else {
          item?.children?.forEach((i) => {
            if (i.name == this.$router.currentRoute.value.name) {
              this.current = i?.meta?.parent;
              //特殊处理手机端联系我们路由显示问题
              if(i.name =='contact'){
                  this.current =i.name;
              }
              
            } else {
              i?.children?.forEach((j) => {
                if (j.name == this.$router.currentRoute.value.name) {
                  this.current = j?.meta?.parent;
                }
              });
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .nav {
    overflow: hidden;
    z-index: 999;
    display: flex;
    background: #fff;
    width: fn.rpx(750);
    height: fn.rpx(100);
    justify-content: space-around;

    .menu {
      height: 100%;
      width: fn.rpx(120);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;


      .ic {
        width: fn.rpx(42);
        height: fn.rpx(42);
      }

      .name {
        font-size: fn.rpx(18);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }

      .active{
         font-size: fn.rpx(18);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: color.$base;
      }

    }

  }
}
</style>